<template>
  <div>
    <el-card>
      <!-- 头部关键字 -->
      <el-row>
        <el-form>
          <span class="keyword">标签名称</span>
            <el-input
              v-model="List.keyword"
              placeholder="根据文章标题搜索"
              class="key"
              size="small"
            ></el-input>
            <span class="sta">状态</span>
            <span class="sel">
              <el-select v-model="List.state" slot="prepend" placeholder="请选择" size="small">
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="0"></el-option>
              </el-select>
            </span>
            <el-button plain size="small" @click="clear">清除</el-button>
            <el-button type="primary" size="small" @click="getArticleList">搜索</el-button>
            <el-button type="success" icon="el-icon-edit" size="small" class="new" @click="addDialogVisible()">新增技巧</el-button>
        </el-form>
      </el-row>
      <!-- /头部关键字结束 -->

      <!-- 消息提示 -->
      <el-alert type="info" show-icon class="msg">
        <template slot="title">
          数据一共{{ total }}条
        </template>
      </el-alert>
      <!-- /消息提示结束 -->

      <!-- 列表区域 -->
      <div class="list">
        <template>
          <el-table :data="articleList">
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column prop="title" label="文章标题" width="200">
            </el-table-column>
            <el-table-column>
              <template v-slot="scope">
                <i :class="scope.row.videoURL ? 'el-icon-film' : ''" @click="videoClick(scope.row.id)"></i>
              </template>
            </el-table-column>
            <el-table-column prop="visits" label="阅读数"></el-table-column>
            <el-table-column prop="username" label="录入人"></el-table-column>
            <el-table-column prop="createTime" label="录入时间" width="200">
              <template v-slot="scope">
                {{ scope.row.createTime | dateFormat }}
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template v-slot="scope">
                {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="200">
              <template v-slot="{row, $index}">
                <el-link type="primary" @click="previewArticle(row.id)">预览</el-link>
                <el-link type="primary" @click="startUser(row, $index)">
                  {{row.state === 1 ? '禁用' : '启用'}}
                </el-link>
                <el-link type="primary" @click="changeEdit(row.id)" :disabled="row.state ? true : false">修改
                </el-link>
                <el-link type="primary" @click="deleteArticleById(row.id)" :disabled="row.state ? true : false">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <!-- /列表区域 -->

      <!-- 页码 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="List.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="List.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- /页码 -->

    <!-- 新增技巧的弹框 -->
    <el-dialog title="新增文章" :visible.sync="closeDialogVisible" width="65%" @close="addDialogClose">
      <!-- 表单 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="文章内容" prop="articleBody">
            <quill-editor v-model="addForm.articleBody"></quill-editor>
        </el-form-item>
        <!-- /富文本 -->
        <!-- 视频地址输入框 -->
         <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="addForm.videoURL" size="small"></el-input>
         </el-form-item>
        <!-- /视频地址输入框 -->
      </el-form>
      <!-- /表单 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /新增技巧的弹框 -->

    <!-- 修改技巧弹框 -->
    <el-dialog title="修改文章" :visible.sync="editCloseDialogVisible" width="65%" close="editDialogClose">
      <!-- 表单 -->
      <el-form :model="changeForm" :rules="changeFormRules" ref="changeFormRef" label-width="80px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="changeForm.title"></el-input>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="文章内容" prop="articleBody">
            <quill-editor v-model="changeForm.articleBody"></quill-editor>
        </el-form-item>
        <!-- /富文本 -->
        <!-- 视频地址输入框 -->
         <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="changeForm.videoURL" size="small"></el-input>
         </el-form-item>
        <!-- /视频地址输入框 -->
      </el-form>
      <!-- /表单 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCloseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /修改技巧弹框 -->

    <!-- 预览弹框 -->
    <el-dialog title="预览文章" :visible.sync="preCloseDialogVisible">
      <template>
        <h2>{{this.changeForm.title}}</h2>
        <span id="previewTime">{{this.changeForm.createTime | dateFormat}}</span>
        <i class="el-icon-view"></i>
        <span id="previewRead">{{this.changeForm.visits}}</span>
        <div id="previewContent" v-html="changeForm.articleBody">
          <!-- <template>
            {{this.changeForm.articleBody}}
          </template> -->
        </div>
      </template>
    </el-dialog>
    <!-- /预览弹框 -->
    <el-dialog :visible.sync="videoStart">
    <video-player  class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getArticles, addArticle, changeArticle, editArticle, deleteArticles, startUserings } from '@/api/article/article'

export default {
  name: 'Articles',
  data() {
    return {
      List: {
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      articleList: [],
      // 页码总数
      total: 0,
      // 新增技巧按钮点击事件
      closeDialogVisible: false,
      // 预览技巧按钮点击事件
      preCloseDialogVisible: false,
      // 修改技巧按钮点击事件
      editCloseDialogVisible: false,
      videoStart: false,
      flag: false,
      // 新增技巧表单
      addForm: {
        usertitle: '',
        articleBody: '',
        videoURL: ''
      },
      changeForm: {
        id: '',
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 添加表单的验证规则
      addFormRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      changeFormRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto',
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true,
        sources: {
          type: '',
          src: ''
        },
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      }
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    async getArticleList() {
      const { data: res } = await getArticles(this.List)
      this.articleList = res.items
      this.total = res.counts
    },
    // 监听 pagesize 改变
    handleSizeChange(newSize) {
      this.List.pagesize = newSize
      this.getArticleList()
    },
    // 监听 pagenum 改变
    handleCurrentChange(newPage) {
      this.List.page = newPage
      this.getArticleList()
    },
    // 清除按钮
    clear () {
      this.List.keyword = ''
      this.List.state = null
    },
    // 新增技巧
    addDialogVisible () {
      this.closeDialogVisible = true
    },
    // 监听添加用户对话框的关闭事件
    addDialogClose () {
      this.$refs.addFormRef.resetFields()
    },
    // 监听修改文章的关闭事件
    editDialogClose () {
      this.$refs.changeFormRef.resetFields()
    },
    // 点击按钮添加用户
    addUser () {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        try {
          await addArticle(this.addForm)
          this.closeDialogVisible = false
          this.getArticleList()
          this.$message('添加成功')
        } catch (err) {
          this.$message('新增失败')
        }
      })
    },
    // 渲染修改文章详情列表
    async changeEdit (id) {
      try {
        const { data } = await changeArticle(id)
        this.changeForm = data
      } catch (err) {
        this.$message('查询失败')
      }
      this.editCloseDialogVisible = true
    },
    // 发起修改文章列表
    async editUser () {
      try {
        const { data } = await editArticle(this.changeForm)
        this.changeForm.title = data.title
        this.changeForm.articleBody = data.articleBody
        this.getArticleList()
        this.editCloseDialogVisible = false
        this.$message('修改成功')
      } catch (err) {
        this.$message('修改失败')
      }
    },
    // 根据id删除技巧
    async deleteArticleById (id) {
      const confirmResult = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      try {
        await deleteArticles(id)
        this.getArticleList()
      } catch (err) {
        this.$message('删除失败')
      }
    },
    async previewArticle (id) {
      try {
        const { data } = await changeArticle(id)
        this.changeForm = data
        console.log(this.changeForm)
      } catch (err) {
        this.$message('查询失败')
      }
      this.preCloseDialogVisible = true
    },
    // 文章状态的监听
    async startUser (val, index) {
      if (val.state === 1) {
        // console.log(this.articleList)
        this.articleList[index].state = 0
      } else {
        this.articleList[index].state = 1
      }
      try {
        await startUserings(val, index)
        this.flag = !this.flag
        this.$message('操作成功')
      } catch (err) {
        this.$message('失败')
      }
    },
    async videoClick (id) {
      try {
        const { data } = await changeArticle(id)
        this.playerOptions.sources.src = data.videoURL
      } catch (err) {
        this.$message('失败')
      }
      this.videoStart = true
    }
  }
}
</script>
<style lang="less" scoped>
.keyword {
  font-size: 14px;
  margin: 0 15px;
  font-weight: 700;
  color: #606266;
}
.key {
  width: 250px;
}
.sta {
  margin-left: 50px;
  font-size: 14px;
  font-weight: 700;
  color: #606266;
}
.sel {
  margin: 0 15px;
}
.new {
  position: absolute;
  right: 0;
}
.msg {
  margin-top: 20px;
}
.list {
  margin-top: 20px;
}
/deep/.el-link--inner {
  padding: 0 5px;
}
/deep/.el-dialog {
  border-radius: 10px;
    .el-icon-view {
      padding-left: 15px;
      padding-right: 10px;
    }
    #previewContent {
      width: 100%;
      background-color: #F5F5F5;
      margin-top: 15px;
      border-top: 1px dashed #C6C6C6;
    }
    .el-dialog__header {
    background-color: #409EFF;
    border-radius: 10px 10px 0 0;
    height: 20px;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__close {
        color: #fff;
      }
    }
    .el-dialog__body {
      .el-form-item {
        margin-top: 20px;
      }
    }
}
</style>
